--- layout: nav title: "Resume" ---

<div id="arrow"></div>
<a id="user" class="round-img" href="https://github.com/walkingxian" target="_blank"></a>
<!-- Swiper -->
<div class="swiper-container swiper-container-all">
    <div class="swiper-wrapper">
        <div class="swiper-slide home">
            <div class="slide-content">
                <img id="portrait" class="round-img" src="../img/portrait.jpg" />
                <div id="motto">
                    <p>你只有非常努力 才能看起来毫不费力</p>
                </div>
                <div id="desc">
                    <p>我叫李俊贤</p>
                    <p>一名前端新人</p>
                    <p style="font-size: 18px;">
                        <a href="mailto:527723190@qq.com" class="email">527723190@qq.com</a>
                    </p>
                </div>
            </div>
        </div>
        <div class="swiper-slide about">
            <div class="slide-title">关于我</div>
            <div class="slide-content">
                <ul class="info-list">
                    <li class="info-item">
                        <div>
                            <img src="../img/about/a_age.svg" />
                        </div>
                        <p>年龄/23岁</p>
                    </li>
                    <li class="info-item">
                        <div>
                            <img src="../img/about/a_edu.svg" />
                        </div>
                        <p>学历/本科</p>
                    </li>
                    <li class="info-item">
                        <div>
                            <img src="../img/about/a_site.svg" />
                        </div>
                        <p>坐标/成都</p>
                    </li>
                    <li class="info-item">
                        <div>
                            <img src="../img/about/a_status.svg" />
                        </div>
                        <p>状态/在职</p>
                    </li>
                </ul>
                <div id="info-desc">
                    <p>两年互联网经验，一年前端开发经验</p>
                    <p>崇尚MVVM开发，模块化深入人心</p>
                    <p>坚定的处女座信仰者，只愿更完美</p>
                </div>
            </div>
        </div>
        <div class="swiper-slide skill">
            <div class="slide-title">技术栈</div>
            <div class="slide-content">
                <div class="skill-container">
                    <ul class="skill-outer-list">
                        <li class="skill-outer-item">linux</li>
                        <li class="skill-outer-item">html5</li>
                        <li class="skill-outer-item">nodejs</li>
                        <li class="skill-outer-item">css3</li>
                        <li class="skill-outer-item">es6</li>
                        <li class="skill-outer-item">hybird</li>
                    </ul>
                    <ul class="skill-inner-list">
                        <li class="skill-inner-item">gulp</li>
                        <li class="skill-inner-item">stylus</li>
                        <li class="skill-inner-item">webpack</li>
                        <li class="skill-inner-item">vue</li>
                    </ul>
                </div>
                <div id="skill-desc">
                    <p>熟练使用vue2.x相关API</p>
                    <p>掌握灵活的PC自适应布局</p>
                    <p>注重JS网络及DOM性能优化</p>
                    <p>了解ES6及gulp/webpack前端自动化工具</p>
                </div>
            </div>
        </div>
        <div class="swiper-slide experience">
            <div class="slide-title">工作经历</div>
            <div class="slide-content">
                <div class="swiper-container swiper-container-exp">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <div class="swiper-container-exp-head">
                                <h3 class="swiper-container-exp-company">高伟达软件股份有限公司</h3>
                                <div class="swiper-container-exp-time">2017年5月-至今</div>
                                <div class="swiper-container-exp-job">&lt;WEB前端工程师&gt;</div>
                                <ul class="swiper-container-exp-skill">
                                    <li>sea.js</li>
                                    <li>jquery</li>
                                    <li>bootstrap</li>
                                    <li>echarts</li>
                                    <li>bootstrap-table.js</li>
                                </ul>
                            </div>
                            <ul class="swiper-container-exp-works">
                                <li>负责快速构建高质量PC页面</li>
                                <li>基于sea.js模块化开发，按需加载</li>
                                <li>利用echarts,bootstrap-table.js进行数据可视化开发</li>
                            </ul>
                        </div>
                        <div class="swiper-slide">
                            <div class="swiper-container-exp-head">
                                <h3 class="swiper-container-exp-company">成都优比电商有限公司</h3>
                                <div class="swiper-container-exp-time">2016年9月-2017年2月</div>
                                <div class="swiper-container-exp-job">&lt;运营职员&gt;</div>
                                <ul class="swiper-container-exp-skill">
                                    <li>photoshop</li>
                                    <li>dreamweaver/li>
                                </ul>
                            </div>
                            <ul class="swiper-container-exp-works">
                                <li>负责各电商店铺宝贝管理</li>
                                <li>担任平台客服</li>
                                <li>完善淘宝店铺页面设计</li>
                            </ul>
                        </div>
                    </div>
                    <!-- Add Pagination -->
                    <div class="swiper-pagination swiper-pagination-exp"></div>
                    <!-- Add Arrows -->
                    <div class="swiper-button-next swiper-button-next-exp"></div>
                    <div class="swiper-button-prev swiper-button-prev-exp"></div>
                    <div id="exp-bg">
                        <img src="../img/exp/exp1.png" />
                        <img src="../img/exp/exp2.png" />
                    </div>
                </div>
            </div>
        </div>
        <div class="swiper-slide works">
            <div class="slide-title">作品集</div>
            <div class="slide-content">
                <div class="swiper-container swiper-container-works">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <ul class="swiper-container-works-lists">
                                <li>负责快速构建高质量PC页面</li>
                                <li>根据业务需求设计合适的工程项目</li>
                                <li>基于sea.js模块化开发，按需加载</li>
                                <li>利用echarts进行数据可视化开发</li>
                            </ul>
                        </div>
                        <div class="swiper-slide">
                            <ul class="swiper-container-works-lists">
                                <li>通过bootstrap-table.js进行数据表格展示</li>
                                <li>负责各电商店铺宝贝管理</li>
                                <li>担任平台客服</li>
                                <li>完善淘宝店铺页面设计</li>
                            </ul>
                        </div>
                    </div>
                    <!-- Add Pagination -->
                    <div class="swiper-pagination swiper-pagination-works"></div>
                    <!-- Add Arrows -->
                    <div class="swiper-button-next swiper-button-next-works"></div>
                    <div class="swiper-button-prev swiper-button-prev-works"></div>
                </div>
            </div>
        </div>
        <div class="swiper-slide contact">Slide 6</div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination swiper-pagination-all"></div>
    <!-- Add ScrollBar -->
    <div class="swiper-scrollbar swiper-scrollbar-all"></div>
    <!-- Swiper JS -->
    <script src="/js/swiper.min.js"></script>

    <!-- Initialize Swiper -->
    <script>
        var animationDom = {
            exp: {
                img1: document.getElementById("exp-bg").children[0],
                img2: document.getElementById("exp-bg").children[1],
            }
        }
        var swiper = new Swiper('.swiper-container-all', {
            direction: 'vertical',
            mousewheel: true,
            pagination: {
                el: '.swiper-pagination-all',
                clickable: true,
            },
            scrollbar: {
                el: '.swiper-scrollbar-all'
            },
            on: {
                slideChange: function () {
                    if (this.activeIndex === 3) {
                        animationDom.exp.img1.classList.add("exp-img-ani");
                        animationDom.exp.img2.classList.add("exp-img-ani");
                    } else {
                        animationDom.exp.img1.classList.remove("exp-img-ani");
                        animationDom.exp.img2.classList.remove("exp-img-ani");
                    }
                }
            }
        });

        var swiper = new Swiper('.swiper-container-exp', {
            mousewheel: true,
            pagination: {
                el: '.swiper-pagination-exp',
                clickable: true,
            },
            navigation: {
                nextEl: '.swiper-button-next-exp',
                prevEl: '.swiper-button-prev-exp',
            }
        });

        var swiper = new Swiper('.swiper-container-works', {
            mousewheel: true,
            pagination: {
                el: '.swiper-pagination-works',
                clickable: true,
            },
            navigation: {
                nextEl: '.swiper-button-next-works',
                prevEl: '.swiper-button-prev-works',
            },
        });
    </script>